@model LogisticsRegisterModel
@using SpotsHub.Gateway.Models.Customer;

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = T("PageTitle.Register").Text;
}

@*@if (Model.RegisterModel.CountryEnabled && Model.RegisterModel.StateProvinceEnabled)
    {
        <script type="text/javascript">
            $(function () {
                $("#@Html.FieldIdFor(model => model.RegisterModel.CountryId)").change(function () {
                    var selectedItem = $(this).val();
                    var ddlStates = $("#@Html.FieldIdFor(model => model.RegisterModel.StateProvinceId)");
                    var statesProgress = $("#states-loading-progress");
                    statesProgress.show();
                    $.ajax({
                        cache: false,
                        type: "GET",
                        url: "@(Url.RouteUrl("GetStatesByCountryId"))",
                        data: { "countryId": selectedItem, "addEmptyStateIfRequired": "false" },
                        success: function (data) {
                            ddlStates.html('');
                            $.each(data, function (id, option) {
                                ddlStates.append($('<option></option>').val(option.id).html(option.name));
                            });
                            statesProgress.hide();
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            alert('Failed to retrieve states.');
                            statesProgress.hide();
                        }
                    });
                });
            });
        </script>
    }*@

@using (Html.BeginForm())
{
    <div class="signup-form">
        <h2 class="page-title"><span class="title-image"></span> Sign Up - Account Address</h2>
        <img src="~/Content/images/signup-banner.jpg" alt="Sign up now!" style="width:100%;display:block;" />
        <section class="signup-container row">
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(false)
            <div class="col-xs-12 col-md-6">
                <div class="row">
                    <div class="info-input names col-xs-6">
                        @Html.RequiredHint() @Html.LabelFor(model => model.RegisterModel.FirstName)
                        @Html.TextBoxFor(model => model.RegisterModel.FirstName, new { @class = "form-control" })
                        @Html.ValidationMessageFor(model => model.RegisterModel.FirstName)
                    </div>
                    <div class="info-input names col-xs-6">
                        @Html.RequiredHint() @Html.LabelFor(model => model.RegisterModel.LastName)
                        @Html.TextBoxFor(model => model.RegisterModel.LastName, new { @class = "form-control" })
                        @Html.ValidationMessageFor(model => model.RegisterModel.LastName)
                    </div>
                    @if (Model.RegisterModel.DateOfBirthEnabled)
                    {
                        <div class="fieldgroup-birthdate">
                            <div class="info-input col-xs-12">
                                @Html.RequiredHint() @Html.LabelFor(model => model.RegisterModel.DateOfBirthDay)
                            </div>
                            @Html.DatePickerDropDowns(Html.FieldNameFor(x => x.RegisterModel.DateOfBirthDay),
                                Html.FieldNameFor(x => x.RegisterModel.DateOfBirthMonth),
                                Html.FieldNameFor(x => x.RegisterModel.DateOfBirthYear),
                                DateTime.Now.Year - 110,
                                DateTime.Now.Year,
                                Model.RegisterModel.DateOfBirthDay,
                                Model.RegisterModel.DateOfBirthMonth,
                                Model.RegisterModel.DateOfBirthYear, true, true,
                                 "form-control", "form-control", "form-control", "col-xs-4", "col-xs-4", "col-xs-4",
                                Nop.Web.Framework.HtmlExtensions.DatePickerDropDownOrder.MonthDayYear)
                            @Html.ValidationMessageFor(model => model.RegisterModel.DateOfBirthDay)
                            @Html.ValidationMessageFor(model => model.RegisterModel.DateOfBirthMonth)
                            @Html.ValidationMessageFor(model => model.RegisterModel.DateOfBirthYear)
                        </div>
                    }
                    <div class="col-xs-12">
                        <div class="info-input">
                            @Html.RequiredHint() @Html.LabelFor(model => model.RegisterModel.Email)
                            @Html.TextBoxFor(model => model.RegisterModel.Email, new { @class = "form-control", @placeholder = "example@example.com" })
                            @Html.ValidationMessageFor(model => model.RegisterModel.Email)
                        </div>

                        <div class="info-input">
                            @Html.RequiredHint() @Html.LabelFor(model => model.RegisterModel.Password)
                            @Html.PasswordFor(model => model.RegisterModel.Password, new { @class = "form-control" })
                            @Html.ValidationMessageFor(model => model.RegisterModel.Password)
                        </div>

                        <div class="info-input">
                            @Html.RequiredHint() @Html.LabelFor(model => model.RegisterModel.ConfirmPassword)
                            @Html.PasswordFor(model => model.RegisterModel.ConfirmPassword, new { @class = "form-control" })
                            @Html.ValidationMessageFor(model => model.RegisterModel.ConfirmPassword)
                        </div>

                        @if(Model.RegisterModel.ShowBuyMembership)
                        { 
                            <div class="info-input">
                                <div class="checkbox">
                                    <label>
                                        <input id="vipCheckId" name="RegisterModel.BuyVip" type="checkbox">
                                        <strong>Join SpotsHUB Member</strong>
                                    </label>
                                </div>
                            </div>
                        }
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="col-xs-12 col-md-6">
                <div class="signup-terms">
                    <h3>Terms of Use</h3>
                    <ol>
                        <li>I have read and accept the <a target="_blank" href="@Url.RouteUrl("Topic", new { SystemName = "TermsOfUse" })">Terms and Conditions</a> and <a target="_blank" href="/privacy-policy">Privacy Policy</a></li>
                        <li>I have reached the age of majority in the province in which I reside</li>
                        <li>I understand that the information I provide will be collected, processed and stored by SpotsHUB, located in Coquitlam, British Columbia, Canada</li>
                        <li>I provide my express consent to receive electronic communications from SpotsHUB (including its employees and affiliates) and I understand that I can withdraw my consent at any time by sending an email to <a href="mailto:info@spotshub.com">info@spotshub.com</a></li>
                    </ol>
                    @Html.CheckBoxFor(model => model.Accepted)
                    <strong>I accept the Terms of Use.</strong>
                </div>
            </div>
            <div class="clear"></div>
            <div class="signup-register col-xs-12 col-md-3">
                <input type="submit" id="registerId" class="btn btn-danger form-control register-next-step-button" value="@T("Account.Register.Button")" name="register-button" />
            </div>
            <div class="clear"></div>
        </section>

        <script type="text/javascript">
            $(document).ready(function () {
                checkBillingCheckbox("start");
                checkTermsAndConditions("start");
                checkSubscriptionPackage();
            });
            $('.signup-billingcheck #@Html.FieldIdFor(model => model.BillingAddress.AllowEmpty)').change(function () {
                checkBillingCheckbox();
            });
            $('.signup-subscription input[name="SelectedProductVariantId"]').change(function () {
                checkSubscriptionPackage();
            });
            $('#Accepted').change(function () {
                checkTermsAndConditions();
            });

            function checkBillingCheckbox(start) {
                if ($('#BillingAddress_AllowEmpty').attr("checked")) {
                    $('.signup-billingwrapper').hide();
                } else {
                    $('.signup-billingwrapper').show();
                }
            }

            function checkTermsAndConditions(start) {
                if ($('#Accepted').attr("checked")) {
                    if (start) {
                        $('.signup-register input').show();
                    } else {
                        $('.signup-register input').stop().fadeIn();
                    }
                } else {
                    if (start) {
                        $('.signup-register input').hide();
                    } else {
                        $('.signup-register input').stop().fadeOut();
                    }
                }
            }

            function checkSubscriptionPackage() {
                $('.subtotal-summary').empty();
                var checkedSub = $('.signup-subscription input[name="SelectedProductVariantId"]:checked');
                if (checkedSub != '') {
                    $('.subtotal-summary').html("Subtotal: " + checkedSub.parent().find('.package-price').text());
                }
            }

        </script>
    </div>
}
